/*
 * 灯光edit组件
 * @Author: zfx
 * @Date: 2018-06-19 17:53:27
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    // .ivu-form-item-content {
    //     img {
    //         width: 150px;
    //     }
	// }
	  .product_thumb {
          width: 50px;
          vertical-align: middle;
        }
</style>
<template>
	<div class="v-customer-banner-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="labelWidth(120, 120)"
			name="create__edit">

			<Tabs
				v-model="language_id"

			>
				<TabPane
					v-for="(locale_suggest, locale_idx) in language_index"
					:key="`hm_tab_lang[${locale_idx}]`"
					:label="locale_suggest.name"

				>
					<!-- 设备名称 -->
					<Form-item
						v-show="locale_idx==1?false:true"
						:label="$t('lightingprese.name')"
						prop="device_zh_name">
						<i-input
							v-model="formValidate.device_zh_name"
							:placeholder="$t('lightingprese.please_enter_name')"
							name="`reate-device_zh_name${locale_idx}`"
							type="text"
							@on-keydown="change_en_language"/>
					</Form-item>

					<Form-item
						v-show="locale_idx==1?true:false"
						:label="$t('lightingprese.name')"
						prop="device_en_name"
					>
						<i-input
							v-model="formValidate.device_en_name"
							:placeholder="$t('lightingprese.please_enter_name')"
							name="`reate-device_zh_name${locale_idx}`"
							type="text"
							@on-keydown="change_zh_language"/>

				</form-item></TabPane>
			</tabs>


			<!-- 排序 -->
			<Form-item
				:label="$t('equipment.sort')"
				prop="sort_order">
				<InputNumber
					:min="1"

					v-model="formValidate.sort_order"
					:placeholder="$t('equipment.please_select_sort')"
					name="create-sort"/>
			</Form-item>

			<!-- 配置预设 -->
			<Form-item
				:label="$t('home.device')"
				prop="producer">
				<Select
					v-model="formValidate.producer"
					clearable
					filterable
					style="width:200px"
					name="create-producer"
					@on-change="realIndex($event)"
				>
					<Option
						v-for="(item,index) in manufactures"
						:value="index"
						:key="item.id">
						<span style="padding-right:20px">{{ item.name }}</span>
						<span style="padding-right:20px">{{ item.bluetooth_code }}</span>
						<span style="padding-right:20px">{{ item.price }}</span>

						<img
							:src="item.product_img"
							class="product_thumb"
							style="padding-right:20px"
						>
						<span style="padding-right:20px">{{ item.remark }}</span>
						<span style="padding-right:20px">{{ item.luminance_min }}</span>
						<span style="padding-right:20px">{{ item.luminance_max }}</span>
						<span style="padding-right:20px">{{ item.color_temperature_min }}</span>
						<span style="padding-right:20px">{{ item.color_temperature_max }}</span>
						<span style="padding-right:20px">{{ item.updated_at }}</span>
					</Option>
				</Select>
			</Form-item>

			<!-- 光强 -->
			<Form-item
				:label="$t('lightingprese.luminance')"
				prop="luminance">
				<InputNumber
					:min="1"

					v-model="formValidate.luminance"
					:placeholder="$t('lightingprese.please_enter_luminance')"
					name="create-sort"/>
			</Form-item>

			<!-- 色温 -->
			<Form-item
				:label="$t('lightingprese.color_temperature')"
				prop="color_temperature">
				<InputNumber
					:min="1"

					v-model="formValidate.color_temperature"
					:placeholder="$t('lightingprese.please_enter_color_temperature')"
					name="create-temperature"/>
			</Form-item>

			<!-- logo -->
			<Form-item
				:label="$t('lightingprese.logo')"
				prop="producer_img">
				<Uploader
					ref="producer_img"
					:default.sync="producer_img_src"
					@on-remove="(file)=>{handleRemove('producer_img',file)}"
					@on-change="(file)=>{handleChange('producer_img',file)}">
					{{ $t('common.pic_tip') }}
				</Uploader>
			</Form-item>
			<!-- 是否显示 -->
			<Form-item
				:label="$t('category.is_show')"
			>
				<RadioGroup
					v-model="formValidate.radio"

				>
					<Radio label="true">是</Radio>
					<Radio label="false">否</Radio>
				</RadioGroup>

			</Form-item>


			<Form-item>
				<Button
					type="primary"
					name="create__submit"
					@click="handleSubmit('formValidate')">
					{{ $t('common.update') }}
				</Button>
			</Form-item>
		</Form>
	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin';
import Uploader from 'src/views/component/Uploader';
import { validateImage } from 'src/validate';
import { showLocalImage } from 'src/views/mixins/showLocalImage';

export default {

	name: 'ManufacturerEdit',
	components: {
		Uploader,
	},
	mixins: [showLocalImage, labelWidthMixin],
	props: {


		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		manufacturer_solo: {
			type: Object,
			default() {
				return {};
			},
		},
		language_index: {
			type: Array,
			default() {
				return [];
			},
		},
		manufactures: {
			type: Array,
			default() {
				return [];
			},
		},
	},

	data() {
		return {
			language_id: 0,

			is_show: 1, // 1表示显示

			producer_img_src: '',

			formValidate: {
				device_zh_name: '', // 中文名称

				device_en_name: '', // 英文名称

				producer: '', // 配置预设

				sort_order: 1,

				radio: 'true',

				luminance: 0,

				color_temperature: 0,

				producer_img: '',

				luminance_min: '',

				luminance_max: '',

				color_temperature_min: '',

				color_temperature_max: '',
			},

			ruleValidate: { // 表单验证规则
				code: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.code') }),
						trigger: 'blur,change',
					},
				],

				device_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.device_name') }),
						trigger: 'blur,change',
					},
				],


				device_zh_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.zh_cn_name') }),
						trigger: 'blur,change',
					},
				],


				device_en_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.en_us_name') }),
						trigger: 'blur,change',
					},
				],
				sort_order: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.sort') }),
						trigger: 'blur,change',
					},
				],
				color_temperature: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('lightingprese.color_temperature') }),
						trigger: 'blur,change',
					},
				],
				luminance: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('lightingprese.luminance') }),
						trigger: 'blur,change',
					},
				],

				producer: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.producer') }),
						trigger: 'blur,change',
					},
				],
				producer_img: [
					{ required: true, validator: validateImage, trigger: 'blur,change' },
				],

			},
		};
	},
	created() {
		this.initFormData();
	},
	methods: {
  	// 切换英文tabs
		change_en_language() {
			if (event.keyCode == 9) {
							 this.language_id = 1;
				 }
		},
		// 切换中文tabs
		change_zh_language() {
      	if (event.keyCode == 9) {
							 this.language_id = 0;
				 }
		},


		initFormData() {
			if (this.manufacturer_solo) {
				console.log(this.manufacturer_solo);

				this.formValidate.device_zh_name = this.manufacturer_solo.device_preset_descriptions[0].name || '';

				this.formValidate.sort_order = this.manufacturer_solo.sort_order;

				this.formValidate.producer = this.manufacturer_solo._index;

				this.formValidate.luminance_min = this.manufactures[this.manufacturer_solo._index].luminance_min;

				this.formValidate.luminance_max = this.manufactures[this.manufacturer_solo._index].luminance_max;

				this.formValidate.color_temperature_min = this.manufactures[this.manufacturer_solo._index].color_temperature_min;

				this.formValidate.color_temperature_max = this.manufactures[this.manufacturer_solo._index].color_temperature_max;

				this.formValidate.color_temperature = this.manufacturer_solo.color_temperature;

				this.formValidate.luminance = Number(this.manufacturer_solo.luminance);

				this.formValidate.producer_img = this.manufacturer_solo.logo;

				this.producer_img_src = this.manufacturer_solo.logo || '';

				if (this.manufacturer_solo.device_preset_descriptions[1]) {
					this.formValidate.device_en_name = this.manufacturer_solo.device_preset_descriptions[1].name;
				}
				if (this.manufacturer_solo.is_show == 1) {
					this.formValidate.radio = 'true';
				} else {
					this.formValidate.radio = 'false';
				}
			}
		},

		//  设备下拉框选择的下标
		 realIndex() {
			 console.log(this.manufactures[this.formValidate.producer].luminance_min);

			 if (this.manufactures[this.formValidate.producer].luminance_min != undefined) {
				 		 this.formValidate.luminance_min = this.manufactures[this.formValidate.producer].luminance_min;

				this.formValidate.luminance_max = this.manufactures[this.formValidate.producer].luminance_max;

				this.formValidate.color_temperature_min = this.manufactures[this.formValidate.producer].color_temperature_min;

				this.formValidate.color_temperature_max = this.manufactures[this.formValidate.producer].color_temperature_max;
			 }
		 },


		/**
         * 更新Banner信息
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			if (this.loading) return;
			this.$emit('update', this.manufacturer_solo.id, this.formDataCreate());
		},

		/**
         * 手动拼接表单数据
         * @return {Object} {拼接好的表单数据}
         */
		formDataCreate() {
           	if (this.formValidate.radio == 'false') {
			   this.is_show = 0;
			 }

			const new_array =	 [
				{
					id: 1,
					name: this.formValidate.device_zh_name,

				},
				{
					id: 3,
					name: this.formValidate.device_en_name,

				},

			 ];


			 const new_json = {
				 customize_json: this.manufactures[this.formValidate.producer].id,
			 };

			const new_object = {
				_method: 'PUT',

				name: this.formValidate.device_zh_name,

				preset: JSON.stringify(new_json),

				device_id: 1,

				sort_order: this.formValidate.sort_order,

				is_show: this.is_show,


				color_temperature: this.formValidate.color_temperature,

				luminance: this.formValidate.luminance,

				luminance_min: this.formValidate.luminance_min,

				luminance_max: this.formValidate.luminance_max,

				color_temperature_min: this.formValidate.color_temperature_min,

				color_temperature_max: this.formValidate.color_temperature_max,

				logo: this.formValidate.producer_img,
			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				form_data.append(key, new_object[key]);
			});

			if (this.formValidate.luminance <= new_object.luminance_max && this.formValidate.luminance >= new_object.luminance_min) {
				new_object.luminance = this.formValidate.luminance;
			} else {
				alert('请输入正确的亮度范围！！');
				return;
			}

			if (this.formValidate.color_temperature <= new_object.color_temperature_max && this.formValidate.color_temperature >= new_object.color_temperature_min) {
				new_object.color_temperature = this.formValidate.color_temperature;
			} else {
				alert('请输入正确的色温范围！！');
				return;
			}

			// dexcriptions需为数组
			for (let i = 0; i < new_array.length; i++) {
				for (const key in new_array[i]) {
					form_data.append(`descriptions[${new_array[i].id}][${key}]`, new_array[i][key]);
				}
			}


			  return form_data;
		},

		// 選擇圖片
		handleChange(field, { file }) {
			this.formValidate[field] = file;
			this.$refs.formValidate.validateField(field);
		},
		/**
		 * 删除图片
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleRemove(field) {
			this.formValidate[field] = null;
			this.$refs.formValidate.validateField(field);
		},

	},
};
</script>
